<template>
  <div>
    <div class="dis_top">检查录入</div>
    <div class="back"></div>
    <div class="dis_flex">
      <div class="flex_l">
        <div class="l_left">检查项目状态列表 ( {{ this.nocheck }} / {{ this.checklist.list.length }} )</div>
        <div class="l_right">
          <el-table
            :data="checklist.list"
          >
            <el-table-column prop="checkStatus" label="" width="30px">
              <template slot-scope="scope">
                  <el-checkbox
                    v-model="scope.row.checkStatus"
                    :true-label="1"
                    :false-label="0"
                    disabled
                  ></el-checkbox>
                </template>
            </el-table-column>
            <el-table-column
              prop="itemName"
              label="">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="flex_r">
        <!-- 右侧标签页 -->
        <div>
          <div class="r_box">
            <div class="r_box_top bj_doctor">
              <el-form :inline="true" ref="ruleFormed">
                <el-form-item label="体检项目" prop="name" class="toptitle">
                  <el-select v-model="itemCurId" @change="getItemDetails">
                    <el-option
                        :value="item.itemId"
                        :label="item.itemName"
                        v-for="(item,index) in itemList"
                        :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="体检编号 :" class="toptitle">{{ peOrdersMain.orderNo }}</el-form-item>
                <el-form-item label="姓名 :" class="toptitle">{{ peOrdersMain.customerName }}</el-form-item>
                <el-form-item label="性别 :" class="toptitle">
                  {{ peOrdersMain.sex == 1 ? "男" : "女"  }}
                </el-form-item>
                <el-form-item label="年龄 :" class="toptitle">
                  {{ peOrdersMain.age + "岁" }}
                </el-form-item>
                <el-form-item label="合同名称 :" class="toptitle">
                  {{ peOrdersMain.contractName }}
                </el-form-item>
              </el-form>
            </div>
            <div style="margin-top: 80px">
              <el-form ref="form" :model="peOrdersDetail" label-width="0px" label-position="left">
                <el-table
                    header-row-class-name="header_row_style"
                    :data="examItemContentDetails"
                    style="width: 100%;overflow: auto"
                >
                  <el-table-column
                      label="检查项目"
                      prop="itemName"
                      show-overflow-tooltip
                      width="150">
                    <template slot-scope="scope">
                      <span v-show="scope.$index==0">{{ peOrdersDetail.itemName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="检查内容"
                      prop="contentName"
                      width="150">
                  </el-table-column>
                  <el-table-column label="检查结果" width="400">
                    <template slot-scope="scope">
                      <div class="butt">
                        <el-button @click="toMore(scope.row,scope.$index,0)" size="mini" style="margin-right: 10px;">更多
                        </el-button>
                        <div style="display: inline-block">
                          <!-- <el-form-item :prop="'examItemContentDetails.examContentsResult.'+scope.$index+'.resultValue'"> -->
                          <el-input type="textarea"
                                    v-model.trim="scope.row.examContentsResult.resultValue"
                                    size="mini"
                                    placeholder="请填写值"
                                    :autosize="{ minRows: 3}"
                                    style="width: 290px;"
                          ></el-input>
                          <!-- </el-form-item> -->
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="单位"
                      prop="units"
                      show-overflow-tooltip
                      width="80">
                  </el-table-column>
                  <el-table-column label="趋势" width="120">
                    <template slot-scope="scope">
                      <el-form-item>
                        <el-select v-model="scope.row.examContentsResult.trend" placeholder="--" size="small" v-if="scope.row.trendDisplaychar!=null">
                          <el-option v-for="(item,index) in scope.row.trendDisplaychar" :label="item" :value="item" :key="index"></el-option>
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="参考范围">
                    <template slot-scope="scope">
                      <span>{{ scope.row.examContentsResult.minLimit }}——{{ scope.row.examContentsResult.maxLimit }}</span>
                    </template>
                  </el-table-column>
                </el-table>
                <!-- 检查结果 -->
                <div class="r_box_con_res">
                  <el-button style="margin:0 0 10px 180px" @click="toMore(peOrdersDetail,0,1)">添加小结</el-button>
                  <el-form-item label="科室小结" prop="desc" label-width="180px">
                    <el-input type="textarea"
                              v-model="peOrdersDetail.diagnosisResult"
                              :autosize="{ minRows: 5}"
                              class="textarea">
                    </el-input>
                  </el-form-item>
                </div>
                <!-- 底部签字 -->
                <div class="r_box_con_bottom">
                  <div>
                    <el-form-item label="检查医师" label-width="100px">
                      <el-select v-model="examRecord.doctorName">
                        <el-option :label="userName" :value="userName"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="检查日期" label-width="100px">
                      <el-date-picker
                        v-model="examRecord.editTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        disabled>
                      </el-date-picker>
                    </el-form-item>
                  </div>

                  <div>
                    <el-button type="primary" @click="saveRecord">提交</el-button>
                    <el-button @click="huitui">返回</el-button>
                    <!--                  <el-button type="primary" @click="saveReport">危值上报</el-button>-->
                  </div>
                </div>
              </el-form>
            </div>
            <el-dialog :title="sizeshow=='1'?'选择科室小结':'选择异常检查结果'" :visible.sync="moreVisible">
              <el-form ref="form" :model="moreList" label-width="0px" label-position="left">
                <el-table
                    ref="multipleTable"
                    header-row-class-name="header_row_style"
                    :data="moreList.records"
                    @selection-change="handleSelectionChange"
                >
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column :label="sizeshow=='1'?'诊断结论':'体检结果'" prop="title">
                    <template slot-scope="scope">
                      <div style="display:flex">
                        <div v-for="(ckitem,ckindex) in scope.row.checkslist" :key="ckindex" style="margin-right:10px">
                          <span v-if="typeof(ckitem)=='string'">{{ckitem}}</span>
                          <span v-else style="display:flex" class="checklist">
                            <span class="boxcheck">[</span>
                             <el-checkbox-group v-model="scope.row.checks[ckindex]">
                                <el-checkbox :label="itemck" v-for="(itemck,indexck) in ckitem" :key="indexck"></el-checkbox>
                              </el-checkbox-group>
                              <span class="boxcheck">]</span>
                          </span>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="toResultArr">确定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      checkStatus: '',
      spanArr: [],
      resultArr: [],
      moreVisible: false,
      moreList: {},
      trendOptions: [
        {label: "↑", value: 1},
        {label: "↓", value: 2},
        {label: "--", value: 3},
      ],
      recordIndex: 0,
      multipleTablelist: [],

      deptName: "",
      ordersId: '',
      userName: '',
      userId: '',
      peOrdersDetail: {
        diagnosisResult:''
      },
      peOrdersMain: {},
      nocheck: 0,
      examItemContentDetails: [],
      examRecord: {},
      formInline: {
        region: '',
        user: '',
      },
      checklist: {list:[]},
      checklist3: [],
      itemDict: {},
      itemCurId: '',
      itemIds: '',
      itemList: [],
      form: {
        diagnosisResult: ""
      },
      list: [],
      toMoreItemRecordIndex: '',
      // 小节或更多
      sizeshow:2
    }
  },
  created() {
    this.ordersId = this.$route.query.id
    this.checklist2()
  },

  methods: {
    huitui() {
      this.$router.go(-1)
    },
    up(x, y) {
      return x.DATA_DATE - y.DATA_DATE;
    },

    // 左侧列表获取
    checklist2() {
      this.orderDeptIds = []
      this.$axios.getPeExamRecordDetail({
        "orderNo": this.ordersId
      }).then(res => {
        if (res.code === "00000") {
          // 获取科室下体检项目列表
          this.checklist.list = res.data.peOrdersDetailsList
          this.checklist.list.forEach(res => {
            res.examItemContentDetails.forEach((it,ix)=>{
              if(it.trendDisplaychar!=null){
                res.examItemContentDetails[ix].trendDisplaychar = res.examItemContentDetails[ix].trendDisplaychar.split("|")
                res.examItemContentDetails[ix].trend = res.examItemContentDetails[ix].defaultValue
              }
            })
            this.itemDict[res.itemId] = res
            if (res.checkStatus == true) {
              this.nocheck += 1
            }
          })
          this.peOrdersMain = res.data.peOrdersMain

          this.getDeptItem()
        }
      })
    },
    getDeptItem() {
      const user = JSON.parse(localStorage.getItem("ms_userInfo"))
      // 由科室可以获得对相应的项目
      this.userId = user.userId
      this.examRecord.doctorName = user.personName
      this.userName = user.personName
      this.itemList=this.checklist.list.filter(item=>{
        return user.deptIds.includes(item.deptId)
      })

      if (this.itemList.length > 0) {
        this.itemCurId = this.itemList[0].itemId
        if(this.itemDict[this.itemCurId]){
          this.peOrdersDetail = this.itemDict[this.itemCurId]
          this.examItemContentDetails = this.peOrdersDetail.examItemContentDetails
          this.examRecord = this.peOrdersDetail.examRecord

          // 如果没有回传医生姓名，默认登录医生
          if(this.examRecord.doctorName==""||this.examRecord.doctorName==null){
            this.examRecord.doctorName = user.personName
          }
          // 如果没有回传时间，默认当前时间
          if(this.examRecord.editTime==""||this.examRecord.editTime==null){
            this.examRecord.editTime = new Date()
          }
        }
      }

    },
    // 当前用户可以查看到几个项目 并进行切换
    getItemDetails(){
      console.log(this.itemCurId)
      console.log(this.itemDict)
      if(this.itemDict[this.itemCurId]){
        this.peOrdersDetail = this.itemDict[this.itemCurId]
        this.examItemContentDetails = this.peOrdersDetail.examItemContentDetails
        this.examRecord = this.peOrdersDetail.examRecord
        if(this.examRecord.doctorName==""||this.examRecord.doctorName==null){
          this.examRecord.doctorName = this.userName
        }
        // 如果没有回传时间，默认当前时间
        if(this.examRecord.editTime==""||this.examRecord.editTime==null){
          this.examRecord.editTime = new Date()
        }
      }else {
        this.peOrdersDetail={
          diagnosisResult:''
        }
        this.examItemContentDetails=[]
      }
    },
    saveRecord() {
      this.peOrdersDetail.editTime = this.peOrdersDetail.examRecord.editTime
      console.log(this.peOrdersDetail.editTime, this.peOrdersDetail.examRecord.editTime);
      let peOrdersDetail2 = JSON.parse(JSON.stringify(this.peOrdersDetail))
      peOrdersDetail2.peExamContentsResultsList = peOrdersDetail2.examItemContentDetails
      peOrdersDetail2.doctorName = peOrdersDetail2.examRecord.doctorName
      peOrdersDetail2.doctorCode = peOrdersDetail2.examRecord.doctorCode
      delete peOrdersDetail2.examItemContentDetails
      delete peOrdersDetail2.examRecord
      if (this.checkStatus == 1) {
        peOrdersDetail2.checkStatus = 0
      } else {
        peOrdersDetail2.checkStatus = 1
      }
      //
      peOrdersDetail2.peExamContentsResultsList.forEach((item, index) => {
        peOrdersDetail2.peExamContentsResultsList[index] = peOrdersDetail2.peExamContentsResultsList[index].examContentsResult
      });
      if (peOrdersDetail2.peExamContentsResultsList[0]) {
        peOrdersDetail2.id = peOrdersDetail2.peExamContentsResultsList[0].recordId
      }
      this.$axios.insertPeExamRecord(peOrdersDetail2).then(res => {
        if (res.code === "00000") {
          this.$message({
            type: 'success',
            message: res.msg
          })
          this.$axios.getPeExamRecordDetail({
            "orderNo": this.ordersId
          }).then(res => {
            if (res.code === "00000") {
              this.nocheck = 0
              this.$set(this.checklist,"list",res.data.peOrdersDetailsList)
              // this.checklist = res.data.peOrdersDetailsList
              this.checklist.list.forEach(res => {
                // this.itemDict[res.itemId] = res
                if (res.checkStatus == true) {
                  this.nocheck += 1
                }
              })
              // this.peOrdersMain = res.data.peOrdersMain
            }
          })
        }
      })
    },

    toMore(row, recordIndex,sizeshow) {
      this.sizeshow = sizeshow
      this.moreVisible = true

      if(this.sizeshow == 0){
        this.toMoreItemRecordIndex = recordIndex
        this.$axios.queryDiagnosticResultOptions({
          itemId : row.itemId,
          contentId : row.itemContentId
        }).then(res => {
          if (res.code === "00000") {
            this.$set(this.moreList, 'records', res.data )
            this.moreList.records.forEach(res2 => {
              var num = 0
              var index = res2.exceptionName.indexOf('[')
              while(index!==-1){
                num++;
                index = res2.exceptionName.indexOf('[',index+1)
              }
              var checks = []
              var checkslist = []
              let txt = res2.exceptionName
              txt = res2.exceptionName.replaceAll("[","-")
              txt = txt.replaceAll("]","-")
              checks = txt.split("-")
              if(num>=1){
                var nums = 1
                for(let i=0;i<num;i++){
                  checks[nums] = checks[nums].split("|")
                  nums=nums+2
                }
              }
              checkslist = JSON.parse(JSON.stringify(checks))
              if(num>=1){
                var nums = 1
                for(let i=0;i<num;i++){
                  checks[nums] = []
                  nums=nums+2
                }
              }
              this.$set(res2, 'checks', checks )
              this.$set(res2, 'checkslist', checkslist )
              console.log(res2);

            })
          }
        })
      }else{
        this.toMoreItemRecordIndex = recordIndex
        this.$axios.queryResultPage({
          itemId : row.itemId
        }).then(res => {
          if (res.code === "00000") {
            this.moreList = res.data
            this.moreList.records.forEach(res2 => {
              // this.$set(res2, 'selections', "0")
              var num = 0
              var index = res2.entryContent.indexOf('[')
              while(index!==-1){
                num++;
                index = res2.entryContent.indexOf('[',index+1)
              }
              var checks = []
              var checkslist = []
              let txt = res2.entryContent
              txt = res2.entryContent.replaceAll("[","-")
              txt = txt.replaceAll("]","-")
              checks = txt.split("-")
              if(num>=1){
                var nums = 1
                for(let i=0;i<num;i++){
                  checks[nums] = checks[nums].split("|")
                  nums=nums+2
                }
              }
              checkslist = JSON.parse(JSON.stringify(checks))
              if(num>=1){
                var nums = 1
                for(let i=0;i<num;i++){
                  checks[nums] = []
                  nums=nums+2
                }
              }
              this.$set(res2, 'checks', checks )
              this.$set(res2, 'checkslist', checkslist )
            })
          }
        })
      }
    },
    handleSelectionChange(val) {
      this.multipleTablelist = val;
      console.log(val);
    },
    toResultArr() {

      if (this.$refs.multipleTable.selection.length == 0) {
        this.$message({
          type: 'warning',
          message: "请选择一条记录进行使用"
        })
      } else {
        this.moreVisible = false
        let stringList = ""
        if(this.$refs.multipleTable.selection.length>1){
          this.$refs.multipleTable.selection.forEach((element,index) => {
            if(index==0){
              stringList+=element.checks.join("")
            }else{
              stringList+=","+ element.checks.join("")
            }
          });
        }else{
          stringList = this.$refs.multipleTable.selection[0].checks.join("")
        }
        if(this.sizeshow==0){
          if(this.peOrdersDetail.examItemContentDetails[this.toMoreItemRecordIndex].examContentsResult.resultValue!=""&&this.peOrdersDetail.examItemContentDetails[this.toMoreItemRecordIndex].examContentsResult.resultValue!=null){
            let text = this.peOrdersDetail.examItemContentDetails[this.toMoreItemRecordIndex].examContentsResult.resultValue + "," + stringList
            this.peOrdersDetail.examItemContentDetails[this.toMoreItemRecordIndex].examContentsResult.resultValue = text
          }else{
            this.peOrdersDetail.examItemContentDetails[this.toMoreItemRecordIndex].examContentsResult.resultValue = stringList
          }
        }else{
          if(this.peOrdersDetail.diagnosisResult!=""&&this.peOrdersDetail.diagnosisResult!=null){
            let text = this.peOrdersDetail.diagnosisResult + "," + stringList
            this.peOrdersDetail.diagnosisResult = text
          }else{
            this.peOrdersDetail.diagnosisResult = stringList
          }
        }
      }
    },
  },
}
</script>

<style scoped>
::v-deep .el-textarea__inner{
  overflow-y: hidden;
}
.dis_top {
  position: absolute;
  z-index: 3;
  top: 0px;
  left: 0px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  color: #000000;
  font-weight: bold;
  width: calc(100% - 10px);
  background: #ffffff;

}

.dis_top > div {
  display: flex;
  align-items: center;
}

.dis_top > div > span {
  margin-left: 20px;
}

.dis_flex {
  display: flex;
  margin-top: 30px;
}

.flex_l {
  width: 300px !important;
  flex-shrink: 0;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.r_box {
  margin-left: 20px;
  margin-bottom: 20px;
  width: 1300px;
  line-height: 25px;
  border: 1px solid #efefef;
}

.r_box_con {
  padding-left: 20px;
  padding-right: 20px;
}

flies_box {
  margin-left: 20px;
  margin-bottom: 20px;
  width: 1300px;
  line-height: 25px;
}

.flies {
  margin-top: 15px;
}

.flies p {
  margin-bottom: 10px;
}

.r_box_con_title {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  border-bottom: 1px solid #333;
  font-size: 18px;
  line-height: 30px;
}

.r_box_con_bor {
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
}

.r_box_con_box {
  margin-top: 10px;
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 45px;
}

.r_box_con_sl1 {
  padding: 0px 5px;
  width: 20%;
}

.r_box_con_sl2 {
  padding: 0px 5px;
  width: 30%;
}

.r_box_con_sl3 {
  padding: 0px 5px;
  width: 10%;
}

.r_box_con_sl4 {
  padding: 0px 5px;
  width: 15%;
}

.r_box_con_sl5 {
  padding: 0px 5px;
  width: 15%;
}

.r_box_con_sl6 {
  padding: 0px 5px;
  width: 10%;
}

.r_box_con_res {
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 0;
}

.textarea {
  width: 600px
}

.r_box_con_res /deep/ .el-form-item__label {
  font-size: 22px !important;
}

.r_box_con_bottom {
  margin-top: 20px;
  display: flex;
}

.r_box_con_bottom div {
  margin-right: 15px;
}

.l_left {
  color: #7F7F7F;
  font-weight: bold;
  height: 36px;
}

.list_ch {
  margin: 20px 0;
}

.flex_r {
  background: #ffffff;
  /* overflow-y: scroll; */
}

.r_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 30px;
  color: #666666;
}

.r_list:hover {
  color: #2F9688;
  font-weight: bold;
}

.l_right {
  /* background: #F2F2F2; */
  height: 100%;
  padding: 10px;
}

/* .l_right{

} */


.diagnose > div:first-child {
  display: flex;
}

.bj_doctor {
  position: fixed;
  z-index: 999;
  top: 110px;
  width: 1260px;
  background: #E5F6FE;
  padding: 20px;
}

.butt {
  display: flex;
  align-items: center
}

.toptitle {
  margin-left: 25px;
}
.back{
  position: absolute;
  top: 20px;
  height: 20px;
  width: 100%;
  z-index: 2;
  background: #f0f0f0;
}
.dis_flex /deep/.el-table td{
  padding:4px 0 !important;
}
.boxcheck{
  margin: 0 10px;
}
.checklist /deep/ .el-checkbox{
  margin-right: 10px;
}
</style>
